<%- include fheader.ejs%>
<style>
    body{background: #f8f8f8}
    .box{
        color:#888;
        border:1px solid #ddd;
        padding: 15px;
        margin: 10px;
        border-radius: 4px;
        background: #fff;
    }
    .box li{
        padding-right: 0;
        margin-left: 0;
    }
    .box2 .ui-form .ui-form-item{
         padding: 0;
     }
    .box2 input[type=text]::-webkit-input-placeholder {
        text-align: right;
    }
    .box.ui-form .ui-form-item{
        line-height:20px;
        height: 60px;
        margin-bottom: 8px;
        padding: 0;
    }
    .box.ui-form label{position: relative!important;line-height: 20px;color:#18b4ed}
    .box.ui-form input,.ui-form label{
        display: block;
        width: 100%;
    }
    .box.ui-form input{
        padding-left: 0;
        line-height: 30px;
    }
    .box input[type=text]{
        border:0
    }
    .bitian{
        color:red;
        vertical-align: -2px;
    }
    .notice{font-size: 12px}
    .blue{color:#18b4ed}
    .ui-dialog-bd div{
        text-align: left;
    }
    .ui-dialog-cnt{
        margin:10px 0
    }
    .ui-dialog.show{
        -webkit-box-orient: vertical;
    }
    #btnBuy{
        margin: 10px 8%;
        background-color: #18b4ed!important;
        color: white!important;
        height: 40px;
        border-radius: 5px;
    }
    .ui-dialog-bd h4{
        text-align:center;
        margin-bottom:10px
    }
    .ui-dialog-bd .methods{
        text-align:center
    }
    .mLogo{
        width: 70px;
        height: 70px;
        border-radius: 70px;
        display: block;
        background-color: #f7bd0c;
        text-align: Center;
        line-height: 70px;
        font-size: 30px;
        color: white;
        margin: 10px auto;
    }
</style>
<header class="ui-header ui-header-stable ui-border-b">
    <i class="ui-icon-return"></i>
    <h1>老年机</h1>
</header>
<section  class="ui-container">
    <form id="form_oldji">
        <div class="box ui-form ui-border-t">
            <div class="ui-form-item ui-form-item-show ui-border-b">
                <label>
                    姓名 <span  class="bitian">*</span>
                </label>
                <input type="text" name="username" placeholder="输入购机用户姓名" value=""/>
            </div>
            <div class="ui-form-item ui-form-item-show ui-border-b">
                <label>
                    身份证号 <span class="bitian">*</span>
                </label>
                <input type="text"  name="cardId" placeholder="输入身份证号" value=""/>
            </div>
            <div class="ui-form-item ui-form-item-show ui-border-b">
                <label>
                    设备IMEI号 <span class="bitian">*</span>
                </label>
                <input  type="text" name="imeiNum" placeholder="输入设备号" maxlength="16" value=""/>
            </div>
        </div>
        <div class="box box2">
            <div class="ui-form">
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label style="width: 60px">
                        机型 <span  class="bitian">*</span>
                    </label>
                    <input  style="padding-left: 60px"  type="text" name="jixing" placeholder="例如:华为" value=""/>
                </div>
                <div class="ui-form-item ui-border-b">
                    <label style="width: 80px">
                        屏幕尺寸
                    </label>
                    <input style="padding-left: 80px" type="text"  name="pingmuSize" placeholder="例如:1080*1920" value=""/>
                </div>

            </div>
            <!--<ul class="ui-list ui-list-text">
                <li class="">
                    <div class="ui-list-info">
                        <h4 class="blue">机型<span class="bitian">*</span><input type="text"  name="jixing" style="padding-left: 20px;width: 100px"></h4>
                    </div>
                    <div class="ui-list-action ui-txt-muted">例如:华为</div>
                </li>
                <li class="ui-border-t">
                    <div class="ui-list-info">
                        <h4 class="blue">屏幕尺寸<input type="text"  name="pingmuSize" style="padding-left: 20px;width:100px"></h4>
                    </div>
                    <div class="ui-list-action ui-txt-muted">例如:1080*1920</div>
                </li>
            </ul>-->
        </div>
    </form>

    <div style="text-align: center;padding: 15px">
        <button id="btnLive" type="button" class="ui-btn ui-btn-primary ui-btn-lg">下一步 &nbsp; <span id="divPrice" style="font-size: 14px">需支付: 0元</span></button>
    </div>

</section>

<div class="ui-dialog" id="uiDialogs">
    <div class="ui-dialog-cnt btnBuy" data-paytype="1">
        <div class="ui-dialog-bd">
            <div class="methods">
                <span class="mLogo">客</span>
                <p>客户扫码支付</p>
            </div>
        </div>
    </div>
    <div class="ui-dialog-cnt btnBuy" data-paytype="2">
        <div class="ui-dialog-bd">
            <div class="methods">
                <span class="mLogo" style="background-color:#18cc47">代</span>
                <p>店员代付</p>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        var GEN_ORDER = '/rest/svcWx/genPay';
        var ACT_OLDPHONE = '/rest/svcWx/saveOldphone';
        var acctype='<%=accType%>';

        $('#divPrice').html('需支付:<%= order_fee%>元');

        $('#btnLive').tap(function(){
            var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

            if(!reg.test($('input[name=cardId]').val())){
                warningTips('身份证长度或格式错误');
                return
            }
            $('.ui-form-item-show input').each(function () {
                if($(this).val()==''){
                    warningTips('输入框不能为空');
                    return
                }
            });

            if($('input[name=jixing]').val()==''){
                warningTips('输入框不能为空');
                return
            }

            if(acctype == 2){
                var p = {
                    payType: '3',
                    prodId: '<%= prodId %>',
                    cellno: '<%= cellno %>',
                    vcode: '<%= vcode %>',
                    img_invoice: '<%= img_invoice %>',
                    img_cellnoandface: '',//uimg['img_cellnoandface_1'].img||'',
                    apply_video: '<%= apply_video %>',
                    out_trade_no_old:'<%= out_trade_no_old %>'
                };

                juq.showLoading();

                juq.fpost(GEN_ORDER, p, function (data, res) {
                    juq.hideLoading();
                    var order_no = data.order_no;
                    var card_id = data.card_id;
                    var real_name = $('input[name=username]').val();
                    var id_card = $('input[name=cardId]').val();
                    var prod_type = '3';
                    var imei = $('input[name=imeiNum]').val();
                    var spec = $('input[name=jixing]').val();
                    var size = $('input[name=pingmuSize]').val();
                    var vp = {
                        order_no:order_no,
                        real_name:real_name,
                        id_card:id_card,
                        prod_type:prod_type,
                        imei:imei,
                        spec:spec,
                        cellno: '<%= cellno %>',
                        size:size,
                        card_id:card_id
                    }
                    juq.fpost(ACT_OLDPHONE, vp, function (info) {
                        if (res.res == 2) {
                            location.href = '/wx/html/paySuccess.html';
                        }
                    });

                }, function (res, info) {
                    juq.hideLoading();
                    juq.showTipErr(info);
                });


            }else {
                var dia2 = $("#uiDialogs").dialog("show");
            }
        });

        function warningTips(msg){
            $.tips({
                content:msg,
                stayTime:2000,
                type:"info"
            });
        }

        $('.btnBuy').on('touchend', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var payType = $(this).data('paytype');
            var p = {
                payType: payType,
                prodId: '<%= prodId %>',
                cellno: '<%= cellno %>',
                vcode: '<%= vcode %>',
                img_invoice: '<%= img_invoice %>',
                img_cellnoandface: '',//uimg['img_cellnoandface_1'].img||'',
                apply_video: '<%= apply_video %>',
                out_trade_no_old:'<%= out_trade_no_old %>'
            };

            juq.showLoading();

            juq.fpost(GEN_ORDER, p, function (data, res) {
                juq.hideLoading();
                var order_no = data.order_no;
                var real_name = $('input[name=username]').val();
                var id_card = $('input[name=cardId]').val();
                var prod_type = '3';
                var imei = $('input[name=imeiNum]').val();
                var spec = $('input[name=jixing]').val();
                var size = $('input[name=pingmuSize]').val();
                var vp = {
                    order_no:order_no,
                    real_name:real_name,
                    id_card:id_card,
                    prod_type:prod_type,
                    imei:imei,
                    spec:spec,
                    size:size
                }
                juq.fpost(ACT_OLDPHONE, vp, function (info) {
                    if (res.res == 2) {
                        location.href = '/wx/html/paySuccess.html';
                    } else {
                        location.href = '/rest/svcWxPage/wxpay?orderNo=' + data.order_no;
                    }
                });

            }, function (res, info) {
                juq.hideLoading();
                juq.showTipErr(info);
            })

        });
    })
</script>
<%- include ftailer.ejs%>